<template>
    <div>
        <lunch-info></lunch-info>
<!--         <lunch-footer></lunch-footer> -->
        <div>
          <footer>
            <el-row>
              <router-link to='/'>
                <el-col :span="6" class="el"><div class="grid-content iconfont"><span class="ico-info">&#xe603;</span></div></el-col>
              </router-link>
              <router-link to='/lunch'>
                <el-col :span="6" class="el"><div class="grid-content iconfont bg-blue"><span class="ico-info">&#xe64d;</span></div></el-col>
              </router-link>
               <router-link to='/car'>
                <el-col :span="6" class="el"><div class="grid-content iconfont"><span class="ico-info">&#xe65e;</span></div></el-col>
              </router-link>
              <router-link to='/user'>
                <el-col :span="6" class="el"><div class="grid-content iconfont"><span class="ico-info">&#xe602;</span></div></el-col>
              </router-link>
            </el-row>
          </footer>
          <div style="height: 47px"></div>
        </div>
    </div>
</template>

<script>
// import LunchFooter from './components/Footer.vue'
import LunchInfo from './components/LunchInfo.vue'
export default {
    name: 'Lunch',
    components: {
        // LunchFooter,
        LunchInfo
    }

}
</script>

<style lang="stylus" scoped>
    footer
      position:fixed;
      bottom:0;
      z-index:9999;
      height: 41px
      width: 100%
      background-color: white
      border-top: 1px solid #eee
      .el
        color: black
        .grid-content
          text-align: center;
          height: 41px
          font-size: 30px
          padding: 3px
          .ico-info
             vertical-align: middle
        .bg-blue
          color: #409EFF
</style>